<template>
    <div class="apply-guarantee">

        <my-form  
            class="my-form"
            ref="myform" 
            v-model="form"
            labelWidth="140px"  
            @submit="submitHandler" 
        >
            <div class="form-content">

                <div class="template-box">
                    <div class="template">
                        111
                    </div>
                </div>

                <div class="line-box"></div>

                <div class="form-box">

                    <section>
                        <h3>保函信息</h3>
                        
                        <el-form-item
                            prop=""
                            label="出函机构："
                        >

                        </el-form-item>

                        <el-form-item
                            prop=""
                            label="保函类型："
                        >
                            
                        </el-form-item>

                        
                        <el-form-item
                            prop=""
                            label="保函格式："
                        >
                            
                        </el-form-item>

                        <el-form-item
                            prop="sampleid"
                            label="选择具体模板："
                        >
                            
                        </el-form-item>

                        <el-form-item
                            prop="needpaper"
                            label="是否需要纸质原件："
                        >
                            
                        </el-form-item>
                    </section>
                    
                    <projectInfo>

                    </projectInfo>

                    <companyInfo>

                    </companyInfo>

                    <section>
                        <h3>上传资料</h3>
                    </section>

                </div>
            </div>
            
            <div slot="btn" class="btns">
                <el-button type="info">上一步</el-button>
                <el-button type="warning">暂存</el-button>
                <el-button type="primary">提交</el-button>
            </div>
        </my-form>
    </div>
</template>
<script>

import projectInfo from "@/sys/all/components/projectInfo.vue"
import companyInfo from "@/sys/all/components/companyInfo.vue"

export default {
    name: '',
    layout: 'def-bht-login',
    components: {
        projectInfo,
        companyInfo,
    },
    data () {
        return {
            submitLoading: null,
            submitLoadingText: '',

            form:{

            },
        }
    },
    computed: {
    },
    watch: {
    },
    methods: {

        submitHandler(){

        },
    },
    created () {
    },
    mounted () {

        // this.submitLoading = this.$loading({
        //     lock: true,
        //     text: this.submitLoadingText,
        //     background: 'rgba(255, 255, 255, 0.9)'
        // });

        // setTimeout(() => this.submitLoading.close(),5000)

    },
}
</script>
<style lang="scss" scoped>
    @import '@css/var.scss';
    .apply-guarantee{
        
        .form-content{
            display: flex;
            margin: 0 120px;
            border-bottom: 1px solid $infoColor3;

            .template-box{
                flex: 1;
              
                .template{
                    padding: 20px;
                    height: 1000px;
                    box-shadow: 0px 0px 10px grey;
                }
    
            }
            
            .line-box{
                width: 1px;
                background-color: $infoColor3;
                margin: 0 40px 20px 45px;
            }
    
            .form-box{
                flex: 1;
            } 
        }

        .btns{
            padding-top:10px;
        }



    }

    ::v-deep section h3{
        font-weight: normal;
        font-size: 18px;
        padding-bottom: 14px;
    }
    

</style>
